<template>
  <div>
    <a-table bordered :columns="shop" :pagination="false" style="margin-top:20px" :data-source="newcolorList">

      <template slot="color2" slot-scope="txt, record">
        <a-select v-model="record.color2" placeholder="请选择套前颜色" show-search @search="handleSearch" style="width: 160px"
          :filterOption="filterOption">
          <a-select-option v-for="(item) in color2List" :key="item.code" :value="item.code" :title="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </template>
      <template slot="brandid" slot-scope="txt, record">
        <a-select placeholder="请选择品牌" v-model="record.brandid" style="width: 160px">
          <a-select-option v-for="item, i in brandList" :key="i" :value="item.code"> {{ item.name }} </a-select-option>
        </a-select>
      </template>
      <template slot="num5" slot-scope="txt, record">
        <a-input placeholder="请输入数量" type="number" style="width: 160px" v-model="record.num5" />
      </template>
      <template slot="vc9" slot-scope="txt, record">
        <a-textarea placeholder="请输入备注" style="width: 200px" v-model="record.vc9"></a-textarea>
      </template>
      <template slot="action" slot-scope="txt, record,i">
        <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteColor(i)">
          <a class="mr-10">
            删除
          </a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button type="dashed" style="width: 100%;margin-top: 20px;" @click="toColor('')">
      <a-icon type="plus" />添加颜色
    </a-button>
    <colorAdd v-if="showColor" :sccode="sccode" @closeColor="closeColor">
    </colorAdd>
  </div>
</template>
<script>
import { sampleColorDelete, getDictChildList, seachColor } from '@api/material/index'
import colorAdd from './colorAdd.vue'

const shop = [
  {
    title: '序号',
    dataIndex: 'rowno'
  },
  {
    title: '销售色',
    dataIndex: 'color'
  },
  {
    title: '销售色名称',
    dataIndex: 'vc2'
  },
  {
    title: '套前色号',
    dataIndex: 'color2',
    scopedSlots: { customRender: 'color2' }


  },
  {
    title: '品牌',
    dataIndex: 'brandid',
    scopedSlots: { customRender: 'brandid' }

  },
  {
    title: '数量',
    dataIndex: 'num5',
    scopedSlots: { customRender: 'num5' }

  },
  {
    title: '备注',
    dataIndex: 'vc9',
    scopedSlots: { customRender: 'vc9' }

  },
  {
    title: '操作',
    width: 80,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    colorAdd
  },
  props: {
    colorList: {
      type: Array,
      default: null
    },
    sccode: {
      type: String,
      default: null,
      required: false,
    },
    patternCode: {
      type: String,
      default: null,
      required: false,
    },
  },
  data() {
    return {
      shop,
      colorCode: '',
      colorName: '',
      form: this.$form.createForm(this),
      newsupplyList: [],
      maxSeq: 0,
      color2List: [],
      brandList: [],
      searchList: [],
      showColor: false,
      showSearch: false,
      colorDetail: {},
      colorIndex: null,
      showDelete: true,
      newcolorList: []
    }
  },
  watch: {
    colorList(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.newcolorList = newVal
      }
    }
  },
  created() {
  },
  mounted() {
    this.getDictChildList()
    this.handleSearch('')
  },
  methods: {
    async getDictChildList() {
      const params = {
        name: 'BRAND',
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },
    async handleSearch(value) {
      const res = await seachColor({ keyWord: value })
      if (res.code == 200) {
        this.color2List = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取套前颜色列表失败！')
        }
      }
    },
    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    toColor() {
        this.showColor = true
    },
    deleteColor(i) {
      this.newcolorList = this.newcolorList.filter((item, index) => index != i)
      this.$emit('changeColor',this.newcolorList)

    },
    closeColor(backList) {
      this.showColor = false
      if (backList.length && this.newcolorList.length) {
        let newArr = backList.filter(item => this.newcolorList.every(item1 => item.mcvc2 != item1.color));
        const numArr = []
        this.colorList.map(item => {
          numArr.push(item.rowno)
          })
          const maxSeq = Math.max.apply(null, numArr)+1
        if (newArr.length) {
          newArr.map((item,i) => {
            const obj = {
              rowno:maxSeq +i,
              color: item.mcvc2,
              vc2: item.mcname,
              color2: undefined,
              brandid: undefined,
              num5: '',
              vc9: '',
            }
            this.newcolorList.push(obj)
          })
        }
      } else if (backList.length && !this.newcolorList.length) {
        backList.map((item,i) => {
          const obj = {
            rowno:i+1,
            color: item.mcvc2,
            vc2: item.mcname,
            color2: '',
            brandid: '',
            num5: '',
            vc9: '',
          }
          this.newcolorList.push(obj)
        })
      }
      this.$emit('changeColor',this.newcolorList)

    }

  }
}
</script>
  